<template>
	<view class="con">
		<!-- <view class="bg_balck"></view> -->
		<view class="top">
			<view class="top1 flex flex_between">
				<view class="top1v1">
					<view class="top1v1_1 flex">
						<view class="top1v1_1v1">Prek<text>price</text></view>
						<image @click="showTan_wen()" class="top1v1_1img" src="/static/index/img12.png" mode="widthFix">
						</image>
					</view>
					<view class="top1v1_2">补贴专区</view>
				</view>
				<view class="top1v2 flex" @click="showTan_video">
					<image class="top1v2_img" src="/static/index/img13.png" mode="widthFix"></image>
					<view class="top1v2_v">实操教程</view>
				</view>
			</view>
			<!-- 进度 -->
			<view class="top2 flex flex_between">
				<view class="top2li">
					<view class="top2li_1"></view>
					<view class="top2li_2 top2li_2_left">选品下单</view>
				</view>
				<view class="top2li">
					<view class="top2li_1"></view>
					<view class="top2li_2">平台补贴</view>
				</view>
				<view class="top2li">
					<view class="top2li_1"></view>
					<view class="top2li_2">确认收货</view>
				</view>
				<view class="top2li">
					<view class="top2li_1"></view>
					<view class="top2li_2 top2li_2_right">好评红包</view>
				</view>
			</view>
		</view>
		<!-- 过滤 -->
		<view class="guolv flex flex_between">
			<view class="guolv_v1">过滤已提取过的产品</view>
			<switch color="#f9bf41" :checked="ed===1" @change="changEd" style="transform:scale(0.5)" />
		</view>
		<!-- 列表 -->
		<view class="list">
			<view class="listli" @click="showTan(item)" v-for="(item,index) in butieList">
				<view class="listlit flex flex_between">
					<view class="listlitz">
						<image class="listlitz_img" :src="item.pic"></image>
						<!-- <view class="listlitz_1">express</view> -->
						<view class="listlitz_2">{{item.dian}}</view>
					</view>
					<view class="listlity shangXiaCenter">
						<view>
							<view class="listlity1 flex flex_between">
								<view class="listlity1z flex flex_between">
									<view class="listlity1z1 flex">
										<image class="listlity1z1_img" :src="item.pingtai_ico" mode="widthFix">
										</image>
										<view class="listlity1z1_v">{{item.title}}</view>
									</view>
									<view class="listlity1z2 flex">
										<image class="listlity1z2_img" src="/static/index/img16.png" mode="widthFix">
										</image>
										<view class="listlity1z2_v">{{item.ping_hongbao}}</view>
									</view>
								</view>
							</view>
							<view class="zhen_add" v-if="item.ping_if">{{item.ping_if}}</view>
						</view>
						<view>
							<view class="listlity3">剩余<text>{{item.kc}}</text>件</view>
							<view class="listlity4">
								<!-- 比如总库存60，没人领取的时候，这个轴就是灰色的，领一个黄色的增加点，都被领取了就全黄了：总库存减去剩余库存。除以总库存 -->
								<view class="listlity4cc"><text
										:style="{width:(Number(item.kc0)-Number(item.kc))/Number(item.kc0)*100+'%'}"></text>
								</view>
								<!-- <view class="listlity4cc"><text :style="{width:item.plan*100+'%'}"></text></view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="listlib flex flex_between">
					<view class="listlib_1 flex">
						<text class="listlib_1_t1">实付{{item.gprice}}</text>
						<text class="listlib_1_t2">补贴{{item.money_butie}}</text>
					</view>
					<view class="listlib_1 flex">
						<text class="listlib_1_t1">客返{{item.money_kefu}}</text>
						<text class="listlib_1_t3">{{item.money_pwd}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="zhezhao" v-if="isShow || isShow_wen ||isShow_video" @click="hideTan"></view>
		<view class="tan" v-if="isShow">
			<view class="zhes_1 flex">
				<image class="zhes_1_img" src="/static/index/img17.png" mode="widthFix"></image>
				<text class="zhes_1_t">补贴须知</text>
			</view>
			<view class="zhes_2 flex flex_between">
				<view class="zhes_2li">实付<text>{{selectButieInfo.gprice}}</text></view>
				<view class="zhes_2li">补贴<text>{{selectButieInfo.money_butie}}</text></view>
				<view class="zhes_2li">客返<text>{{selectButieInfo.money_kefu}}</text></view>
				<view class="zhes_2li">红包<text>{{selectButieInfo.ping_hongbao}}</text></view>
			</view>
			<view class="zhes_3">（本商品单账号限购1次，多买无补贴）</view>
			<view class="zhes_4">禁止差评、禁止合并付款、禁止提前确认收货等违规行为，发现讲不予补贴及结算</view>
			<view class="zhes_5Wrap flex flex_between">
				<view class="zhes_51" @click="hideTan">我再看看</view>
				<view class="zhes_52" @click="hideTan_goDetail(selectButieInfo.id)">我已知晓</view>
			</view>

		</view>
		<!-- 通用问号弹出 -->
		<view class="tan tan_wen" v-if="isShow_wen">
			<view class="tan_title">关于低价专区</view>
			<view class="tan_t flex">
				<view class="tan_newli_wrap">
					<view class="tan_newli flex">
						<image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
						<view class="tan_newli_v">本专区为共享专区，信息来源于网络</view>
					</view>
					<view class="tan_newli flex">
						<image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
						<view class="tan_newli_v">每个ID每天仅限提取30个产品链接</view>
					</view>
					<view class="tan_newli flex">
						<image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
						<view class="tan_newli_v">请您自行甄别真伪，避免您资金损失</view>
					</view>
					<view class="tan_newli flex">
						<image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
						<view class="tan_newli_v">如您是商家您反对，请联系我们删除</view>
					</view>
					<view class="tan_newli flex">
						<image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
						<view class="tan_newli_v">请不要将本专区信息应用于非法途径</view>
					</view>
				</view>

			</view>
			<view class="tan_b flex flex_between">
				<view class="tan_b_d2" @click="hideTan">我已知晓</view>
			</view>
		</view>
		<!-- 实操课程 -->
		<view class="tan tan_video" v-if="isShow_video">
			<video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
				@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
		</view>
	</view>
</template>

<script>
	import {
		getProductButie, //补贴专区
		ProductButieGet, //补贴任务提取
		getProductButieOrder
	} from '@/request/api.js'
	export default {
		data() {
			return {
				openid: uni.getStorageSync('openid'), //获取缓存的openid
				isShow: false,
				isShow_wen: false,
				isShow_video: false,
				myButieList: [], //"我的补贴"列表
				ed: 0, //0未提取，1提取过
				butieList: [], //列表
				selectButieInfo: {}, //当前选择的产品
				oid:'',//补贴任务ID
			};
		},
		onLoad() {
			this.getProductButieFun() // 获取补贴专区列表
		},
		methods: {
			// 获取补贴专区列表
			getProductButieFun() {
				let param = {
					openid: this.openid,
					ed: this.ed
				}
				getProductButie(param).then(res => {
					console.log('获取补贴专区列表')
					console.log(res)
					if (res.error_code === 0) {
						this.butieList = res.data.arrList
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},

			// 改变是否已提取状态
			changEd(e) {
				console.log(e)
				let statu = e.detail.value
				if (statu) {
					this.ed = 1
				} else {
					this.ed = 0
				}
				this.getProductButieFun()
			},

			// 补贴任务提取
			showTan(item) {
				let that = this;
				this.selectButieInfo = item

				let param = {
					openid: this.openid,
					gid: item.id
				}
				// 1.先判断有没有提取任务,如果已经提取过,就不需要弹框,直接进入详情页;
				// 2.如果没有提取过，再判断：是否已达提取最大数量，如果没有，则弹出框；反之：提示：今日提取数量已用完，无法再提取
				// 如果库存为0提示:当前补贴产品已被抢光了;否则就跳到详情页
				ProductButieGet(param).then(res => {
					console.log('补贴任务提取')
					console.log(res)
					if (res.error_code === 0) {
						this.oid = res.data.id
						// 如果没有提取，先弹出弹框
						that.isShow = true
					} else if (res.error_code === 1 && res.msg === '已提取过') {
						// 如果已经提取过,之前跳转详情
						this.oid = res.data.id
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
						// 已经提取过的可能出现倒计时为负数
						// 1、判断这个账号，有没有提交过订单
						// 2、有提交过订单的情况下，可以进入，隐藏再来一单的按钮
						// 3、没有提过订单，直接提示不能进入
						let params = {
							openid: this.openid,
							oid: this.oid
						}
						getProductButieOrder(params).then(res => {
							if (res.error_code === 0) {
								// this.butieOrderInfoById = res.data
								let task_item = res.data.task_item
								if(res.data.surplus_time<=0){
									if(task_item.length===1&&task_item[0].ordernum===''){
										console.log('没有提交过订单--不能进入详情')
										uni.showToast({
											icon:'none',
											title:'你的操作时间,超过了有效时间,无法进入页面'
										})
									}else{
										console.log('提交过订单')
										setTimeout(function() {
											uni.navigateTo({
												url: '/packageA/index/subsidyZoneDe?id=' + res.data.id
											})
										}, 500)
									}
								}else{
									setTimeout(function() {
										uni.navigateTo({
											url: '/packageA/index/subsidyZoneDe?id=' + res.data.id
										})
									}, 500)
								}
							}else {
								uni.showToast({
									icon: 'none',
									title: res.msg
								})
							}
						})
						
					} else {
						// 其余的情况：补贴数量剩余不足；已达提取最大数量
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			showTan_wen() {
				this.isShow_wen = true
			},
			showTan_video() {
				this.isShow_video = true
			},
			hideTan() {
				this.isShow = this.isShow_wen = this.isShow_video = false
				this.getProductButieFun()
			},
			hideTan_goDetail(id) {
				// 点击我已知晓的时候，给后端发一个查询命令，查询这个产品的实时“库存”，如果库存大于0时，库存-1，然后，后端返个前端一个数值，前端页面跳转到补贴专区对应这个产品的详情页;
				// 点击"我已知晓",再次去请求这个接口,判断补贴数量剩余是否不足
				// 如果库存为0提示:当前补贴产品已被抢光了;否则就跳到详情页
				let param = {
					openid: this.openid,
					gid: id
				}
				ProductButieGet(param).then(res => {
					console.log('补贴任务提取')
					console.log(res)
					if (res.error_code === 0) {
						this.oid = res.data.id
					}else if (res.error_code === 1 && res.msg === '已提取过') {
						// 如果已经提取过,之前跳转详情
						this.oid = res.data.id
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
						setTimeout(function() {
							uni.navigateTo({
								url: '/packageA/index/subsidyZoneDe?id=' + res.data.id
							})
						}, 500)
					} else {
						// 其余的情况：补贴数量剩余不足；已达提取最大数量
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
					this.isShow = this.isShow_wen = this.isShow_video = false
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.con {
		.top {
			width: 100%;
			height: auto;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			position: relative;
			z-index: 1;
			padding-top: 54rpx;

			.top1 {
				width: 100%;
				height: auto;
				align-items: normal;

				.top1v1 {
					width: 400rpx;
					height: 140rpx;
					border-radius: 0px 100rpx 100rpx 0px;
					background-color: rgba(249, 191, 65, 1);
					padding: 16rpx 30rpx;
					box-sizing: border-box;

					.top1v1_1 {
						.top1v1_1v1 {
							line-height: 58rpx;
							color: rgba(16, 16, 16, 1);
							font-size: 48rpx;
							font-family: 'AvantGardeFont';
							font-weight: bold;
							margin-top: 5rpx;

							text {
								font-weight: 100;
							}
						}

						.top1v1_1img {
							width: 24rpx;
							position: relative;
							top: -15rpx;
						}
					}

					.top1v1_2 {
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
						margin-top: 6rpx;
					}
				}

				.top1v2 {
					width: 220rpx;
					height: 68rpx;
					border-radius: 100rpx;
					background-color: rgba(249, 191, 65, 1);
					justify-content: center;
					margin-right: 30rpx;

					.top1v2_img {
						width: 28rpx;
						height: auto;
						margin-right: 10rpx;
					}

					.top1v2_v {
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
					}
				}

			}

			.top2 {
				width: 650rpx;
				height: auto;
				margin: 30rpx;
				box-sizing: border-box;
				border-top: 2rpx solid #d3d3d3;
				padding: 30rpx 0;
				margin-top: 50rpx;
				margin-bottom: 20rpx;

				.top2li {
					width: 25%;
					text-align: center;

					.top2li_1 {
						width: 16rpx;
						height: 16rpx;
						border-radius: 100%;
						margin: 0 auto;
						position: relative;
						top: -38rpx;
						background-color: rgba(137, 137, 137, 1);
					}

					.top2li_2 {
						color: rgba(0, 0, 0, 1);
						font-size: 28rpx;
						margin-top: -20rpx;
					}

					.top2li_2.top2li_2_left {
						text-align: left;
					}

					.top2li_2.top2li_2_right {
						text-align: right;
					}
				}
			}
		}

		.guolv {
			width: 100%;
			height: 90rpx;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			padding: 24rpx 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			padding-right: 0;
			z-index: 1;
			position: relative;

			.guolv_v1 {
				color: rgba(0, 0, 0, 1);
				font-size: 28rpx;
			}
		}

		.list {
			width: 100%;
			height: auto;

			.listli {
				width: 100%;
				height: 334rpx;
				border-radius: 20rpx;
				background-color: rgba(255, 255, 255, 1);
				overflow: hidden;
				padding: 30rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;

				.listlit {
					width: 100%;
					height: 200rpx;
					align-items: normal;
					position: relative;
					overflow: hidden;

					.listlitz {
						width: 200rpx;
						height: 200rpx;
						border-radius: 20rpx;
						// overflow: hidden;
						position: relative;
						margin-right: 34rpx;

						.listlitz_img {
							width: 200rpx;
							height: 200rpx;
							border-radius: 20rpx;
						}

						.listlity1z1_v {
							width: 300rpx;
						}

						.listlitz_1 {
							position: absolute;
							height: 32rpx;
							border-radius: 0px 40rpx 40rpx 0px;
							background-color: rgba(249, 65, 65, 1);
							display: inline-block;
							color: rgba(255, 255, 255, 1);
							font-size: 24rpx;
							left: 0;
							top: 20rpx;
							line-height: 27rpx;
							padding: 0 10rpx;
						}

						.listlitz_2 {
							width: 100%;
							height: 44rpx;
							line-height: 44rpx;
							border-radius: 0px 0px 10px 10px;
							background-color: rgba(249, 191, 65, 1);
							color: rgba(16, 16, 16, 1);
							font-size: 24rpx;
							overflow: hidden;
							position: absolute;
							bottom: 0;
							text-align: center;
						}
					}

					.listlity {
						width: 500rpx;
						height: 200rpx;

						.listlity1 {
							width: 100%;

							box-sizing: border-box;

							.listlity1z {
								width: 100%;

								.listlity1z1 {
									.listlity1z1_img {
										width: 32rpx;
										height: auto;
										margin-right: 10rpx;
									}

									.listlity1z1_v {
										width: 210rpx;
										height: 36rpx;
										line-height: 36rpx;
										color: rgba(16, 16, 16, 1);
										font-size: 28rpx;
										overflow: hidden;
									}
								}

								.listlity1z2 {
									height: 36rpx;
									line-height: 40rpx;
									border-radius: 40rpx;
									background-color: rgba(216, 30, 6, 1);
									color: rgba(16, 16, 16, 1);
									font-size: 28rpx;
									padding: 0 10rpx;
									padding-right: 20rpx;

									.listlity1z2_img {
										width: 36rpx;
										height: auto;
									}

									.listlity1z2_v {
										color: rgba(255, 255, 255, 1);
										font-size: 28rpx;
										margin-left: 8rpx;
										font-family: 'AvantGardeFont';
									}
								}
							}

						}

						.listlity2 {
							width: 100%;
							padding-right: 30rpx;
							box-sizing: border-box;
							color: rgba(0, 0, 0, 1);
							font-size: 24rpx;
							font-family: 'AvantGardeFont';
							margin-top: 14rpx;

							text {
								font-size: 46rpx;
							}
						}

						.listlity3 {
							width: 100%;
							box-sizing: border-box;
							color: rgba(137, 137, 137, 1);
							font-size: 24rpx;
							width: 100%;
							text-align: right;

							text {
								font-family: 'AvantGardeFont';
							}
						}

						.listlity4 {
							width: 100%;
							box-sizing: border-box;

							.listlity4cc {
								width: 100%;
								height: 16rpx;
								border-radius: 20rpx;
								margin-top: 6rpx;
								background-color: rgba(232, 230, 230, 1);
								position: relative;
							}

							text {
								width: 30%;
								height: 16rpx;
								border-radius: 20rpx;
								display: inline-block;
								background-color: rgba(249, 191, 65, 1);
								position: absolute;
								top: 0;
								left: 0;
								;
							}
						}
					}
				}

				.listlib {
					width: 100%;
					height: auto;
					padding: 30rpx 0;
					padding-bottom: 0;
					box-sizing: border-box;

					.listlib_1 {
						width: 310rpx;
						height: 44rpx;
						background: #f00;
						line-height: 44rpx;
						border-radius: 40rpx;
						overflow: hidden;

						.listlib_1_t1 {
							background-color: rgba(249, 191, 65, 1);
							width: 50%;
							color: rgba(0, 0, 0, 1);
							font-size: 24rpx;
							height: 44rpx;
							display: block;
							text-align: center;
						}

						.listlib_1_t2 {
							background-color: rgba(0, 0, 0, 1);
							width: 50%;
							color: #fff;
							font-size: 24rpx;
							height: 44rpx;
							display: block;
							text-align: center;
						}

						.listlib_1_t3 {
							background-color: rgba(232, 230, 230, 1);
							width: 50%;
							color: rgba(0, 0, 0, 1);
							font-size: 24rpx;
							height: 44rpx;
							display: block;
							text-align: center;
						}
					}
				}
			}
		}

		.zhes_1 {
			width: 100%;
			height: auto;
			text-align: center;
			margin-bottom: 28rpx;
			justify-content: center;

			.zhes_1_img {
				width: 40rpx;
				height: auto;
				margin-right: 8rpx;
			}

			.zhes_1_t {
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.zhes_2 {
			width: 100%;
			height: auto;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-bottom: 8rpx;

			.zhes_2li {
				color: rgba(0, 0, 0, 1);
				font-size: 28rpx;
				font-weight: bold;

				text {
					font-family: 'AvantGardeFont';
				}
			}
		}

		.zhes_3 {
			height: 32rpx;
			line-height: 32rpx;
			color: rgba(16, 16, 16, 1);
			font-size: 24rpx;
			width: 100%;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.zhes_4 {
			width: 100%;
			height: auto;
			border-radius: 20rpx;
			background-color: rgba(238, 238, 238, 1);
			padding: 20rpx 30rpx;
			color: rgba(249, 65, 65, 1);
			font-size: 24rpx;
			box-sizing: border-box;
			line-height: 40rpx;
			margin-bottom: 48rpx;
		}

		.zhes_5Wrap {
			width: 100%;
			font-size: 28rpx;
			text-align: center;

			.zhes_51 {
				width: 260rpx;
				background-color: rgba(238, 238, 238, 1);
				border-radius: 100rpx;
				height: 72rpx;
				line-height: 72rpx;
			}

			.zhes_52 {
				width: 260rpx;
				background-color: rgba(249, 191, 65, 1);
				border-radius: 100rpx;
				height: 72rpx;
				line-height: 72rpx;
			}
		}

		.tan {
			padding-bottom: 56rpx;
			margin-top: -272rpx;
		}
	}

	.tan_video {
		width: 650rpx;
		height: 1105rpx;
		padding: 0 0;
		margin-left: -325rpx;
	}

	.tan.tan_video {
		margin-top: -552rpx;
	}

	video {
		width: 650rpx;
		height: 1105rpx;
	}

	.zhen_add {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: rgba(255, 246, 228, 1);
		color: rgba(0, 0, 0, 1);
		font-size: 24rpx;
		padding: 10rpx 16rpx;
		box-sizing: border-box;
		margin-top: 12rpx;
	}
</style>